<!DOCTYPE html>
<html lang="en">
<head>

{{ AssignmentForm.media }}
<meta charset="utf-8">
<title>
Fetch'em
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}
.sidebar-nav {
	padding: 9px 0;
}
</style>
<link href="{{ STATIC_URL }}css/bootstrap-responsive.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/timepicker.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


<script type="text/javascript">
    $(document).ready(function(){
	
    });
</script>
</head>

<body>
<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container"> <a class="brand" href="#">Fetch'em</a>
        <div class="btn-group pull-right"> <a class="btn btn-primary" href="/logout"> Sign out </a> </div>
        <div class="nav-collapse">
          <ul class="nav">
	   <li class="dropdown">
             <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th-list"></i> {{cCourse.Name}} <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                   <!--     <li><a tabindex="-1" href="#">Software Engineering</a></li>
                        <li><a tabindex="-1" href="#">Fundamentals of Database Systems</a></li> -->

			{% for c in Courses %}
        {% if c != cCourse %}
			<li><a tabindex="-1" href="/course-{{c.id}}">{{c.Name}} | {{c.Semester}} {{c.Year}}</a></li>
      {% endif %}
			{% endfor %}
			{% if userObj.Type == "I" %}
			<li><a data-toggle="modal" href="#newCourseModal"><i class="icon-plus"></i> New Course</a></li>
			{% endif %}
                      </ul>
                    </li>
            <li><a data-toggle="modal" href="#assModal"><i class="icon-plus"></i> New Assignment</a></li>
            {% if userObj.Type == "I" %}
            <li><a data-toggle="modal" href="#courseSettingsModal"><i class="icon-wrench"></i> Course Settings</a></li>
            {% endif %}
          </ul>
          <p class="navbar-text pull-right"> {{ userObj.Name }}&nbsp;&nbsp;&nbsp; </p>
        </div>
        <!--/.nav-collapse --> 
      </div>
    </div>
  </div>

  <div class="container">

    {% if noAssignment == "Yes" %}

    <div class="row">
      <div class="span4">
      <img src="{{ STATIC_URL }}img/arrow-left.jpg" align="right">
      </div>
      <div class="span8"> 
      <h1> Start by fetching an assignment!
      </h1>
            
      </div>
    </div>
    {% elif noAssignment == "No" %}

    <div class="tabbable tabs-left">
      <ul class="nav nav-tabs">
        {% for i in cAssignments %}
        <li {% if i == cAssignment %}class="active"{% endif %}>
        <a href="/course-{{ cCourse.id }}/assignment-{{ i.id }}" data-toggle="tab">{{ i.SubjectLine }}</a>
        </li>
        {% endfor %}
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="uselessID">
          <div class="container-fluid">
            <div class="row-fluid">
              <div class="span3">
                <p><div class="btn-group btn-group-vertical" style="left:12%;right:12%;">
                  <a class="btn btn-small" href="fetch"><i class="icon-repeat"></i> Fetch</a>
                  {% if noSubmission == "No" %}
                  <a class="btn btn-small" href="notifyAll"><i class="icon-envelope"></i> Send Grades</a>
                  {% endif %}
                  <a class="btn btn-small" data-toggle="modal" href="#assnSettings"><i class="icon-wrench"></i> Assignment Settings</a>
                </div>
              </p>

                <ul class="nav nav-tabs nav-stacked">
                  {% for i in cSubmissions %}
                  <li {% if i == cSubmission %}class="active"{% endif %}>
                  <a 

                  {% if i.Status == "Graded" %}
                   style = "background:lightblue;"
                  {% elif i.Status == "Sent" %}
                   style = "background:#CCFFCC;"
                  {% elif i.Status == "Marked" %}
                   style = "background:#FCF8E3;"

                  {% endif %}

                  href="/course-{{ cCourse.id }}/assignment-{{ cAssignment.id }}/{{i.id}}">{{ i.student.Name }} - {{ i.student.RollNo }}</a>
                  </li>
                  {% endfor %}
                  {% for i in cStudents %}
                  <li  class="active">
                     <a style="background:#EFD4DA" href="#">{{ i.Name }} - {{ i.RollNo }}</a>
                  </li>
                  {% endfor %}
                </ul>
              </div>
              <div class="span9">
               
                  {% if noSubmission == "Yes" %}
                  <div class="hero-unit">
                    <h1>No submissions yet!</h1>
                    <p>Either you didn't send the assignment or students are too lazy to submit. Try fetching again.</p>
                  </div>
                  {% elif noSubmission == "No" %}
                   <div class="thumbnail">
                  <iframe src='file' width=99% height=450px> </iframe>
                  <div class="caption">

		<form method="post">
	{% csrf_token %}
		{% for field in subForm %}
			{% if field.name == "Comments" %}
								<table>
								  <tr valign="center">
						   <td>Comments: </td>
						   <td>{{ field }} {{ field.errors }}
						   <td style="width:60%" align="right">
						    Received at:<em> {{ cSubmission.ReceivedDateTime }} </em><br>
						    {% if cSubmission.Status == "Graded" or cSubmission.Status == "Marked" or cSubmission.Status == "Sent" %}
							Graded by:<em> {{ cSubmission.grader.Name }} at {{ cSubmission.Grade_Timestamp }}</em>
							{% endif %}
							</tr></table>
			{% endif %}
		{% endfor %}
		{% for field in subForm %}
			{% if field.name != "Comments" and field.name != "BPType" and field.name != "BPValue" %}
					{{ field.name }}{{ field }} {{field.errors}}
			{% endif %}
		{% endfor %}
		{% for field in subForm %}
			{% if field.name == "BPType" %}
					{{ field }} {{field.errors}}
			{% endif %}
		{% endfor %}
		{% for field in subForm %}
			{% if field.name == "BPValue" %}
					 Bonus Value{{ field }} {{field.errors}}
			{% endif %}
		{% endfor %}
	<br>
		<button class="btn btn-info" type="submit" name="submissionSave">Save</button>
		<button class="btn btn-success" type="submit" name="submissionSaveSend">Save and Send</button>
		<button class="btn btn-warning" type="submit" name="submissionMark">Mark for Review</button>
		</form>
                  </div>
                  </div>
                  {% endif %}
                
              </div>
            </div>
          </div>
        </div>
        
        </div>
      </div>
    </div>
    {% endif %}

    <hr>
<footer>
  <p>&copy; Group 7</p>
</footer>
  </div>

	{% if noAssignment == "No" %}
  <!-- Assignment Settings Modal -->
  <div id="assnSettings" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="assnSettingsLabel" aria-hidden="true">

 <div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="assnSettingsLabel">{{ cAssignment.SubjectLine }} Settings</h3>
 </div>
	<div class="modal-body">

	<form method="post">
	{% csrf_token %}
	 <p><div class="input-prepend"><span class="add-on">Max Marks</span>{{ assnSettings.MaxMarks }}</div>&nbsp;<p>{{ assnSettings.MaxMarks.errors }}
	<table> 
	<tr>
	<td><div class="input-prepend"><span class="add-on">Start Date & Time</span>{{ assnSettings.StartDateSettings }} &nbsp; {{ assnSettings.StartTimeSettings }}</div>
	</tr>
	{% if assnSettings.StartDateSettings.errors != '' or assnSettings.StartTimeSettings.errors != '' %}
	<tr>
   	<td>{{ assnSettings.StartDateSettings.errors }}  &nbsp; <td>{{ assnSettings.StartTimeSettings.errors }}
	</tr>
	{% endif %}
	<tr>
	<td><div class="input-prepend"><span class="add-on">End Date & Time</span>{{ assnSettings.EndDateSettings }} &nbsp; {{ assnSettings.EndTimeSettings }}</div>
	</tr><tr>
	<td>{{ assnSettings.EndDateSettings.errors }} &nbsp; <td>{{ assnSettings.EndTimeSettings.errors }}
	</tr>
	</table>

</div>
	<div class="modal-footer">
	<a href="delete" class="btn btn-danger">Delete Assignment</a>
      <button class="btn" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary" name="assignmentSave">Save</button>
      </form>

	</div>

	</div>
	{% endif %}

  <!-- New Assignment Modal -->
  <div id="assModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="assModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="assModalLabel">Fetch new assignment</h3>
          </div>
          <div class="modal-body">
          <p>Enter the Subject of the assignment to be fetched.</p>
          <form method="post">
      {% csrf_token %}
      	{{ AssignmentForm.SubjectLine }} &nbsp; {{ AssignmentForm.SubjectLine.errors }}
      	<br>{{ AssignmentForm.MaxMarksNew }} &nbsp; {{ AssignmentForm.MaxMarksNew.errors }}
            <p>How many questions does the assignment have? (optional)</p>
      	{{ AssignmentForm.noQuestions }} &nbsp; {{ AssignmentForm.noQuestions.errors }}
      	  <p>
      	 <div class="accordion" id="accordion2">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
              Sub parts for questions
            </a>
          </div>

		  <script type="text/javascript">
		  $('#id_MaxMarksNew').change(function(){
		  var n = document.getElementById('id_MaxMarksNew').value;
		  if(n>32767 || n<0)
		  {
			alert("Invalid value; Please enter a value between 0 and 32767.");
			document.getElementById('id_MaxMarksNew').value = "";
		  }
		  });
		</script>
		  
		  
      <script type="text/javascript">
      $('#id_noQuestions').change(function(){

      var d = document.getElementById('noSubPartsDiv');
      var n = document.getElementById('id_noQuestions').value;
      
	  if(n>100)
	  {
		alert("Too many questions; Please enter a value between 1 and 100");
		document.getElementById('id_noQuestions').value = 1;
		n = 1;
	  }
	  if(n<=0)
	  {
		alert("You must have at least one question in the assignment! Please enter a number between 1 and 100.");
		document.getElementById('id_noQuestions').value = 1;
		n = 1;
	  }
	  d.innerHTML = "";
      for (var i=1;i<=n;i++)
      {
      	d.innerHTML += "Q" + i + "<input align='right' type='text' name='s_Q" + i + "'class='span1' value='0'> &nbsp; &nbsp;";
      	if(i%3==0)
      	{
      		d.innerHTML += "<p></p>";
      	}
      }

      });
      </script>	
	  

          <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
      	<div id="noSubPartsDiv"> </div>
		<script>
	  document.getElementById('noSubPartsDiv').innerHTML = "Q1 <input align='right' type='text' name='s_Q1' class='span1' value='0'> &nbsp;";
		</script>
            </div>
          </div>
        </div>
      </div>
      	<table> 
      	<tr>
      	<td>{{ AssignmentForm.StartDate }} &nbsp; <td>{{ AssignmentForm.StartTime }}
      	</tr><tr>
         	<td>{{ AssignmentForm.StartDate.errors }}  &nbsp; <td>{{ AssignmentForm.StartTime.errors }}
      	</tr><tr>
      	<td>{{ AssignmentForm.EndDate }} &nbsp; <td>{{ AssignmentForm.EndTime }}
      	</tr><tr>
      	<td>{{ AssignmentForm.EndDate.errors }} &nbsp; <td>{{ AssignmentForm.EndTime.errors }}
      	</tr>
      	</table>
      </div>
              
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" name="assignmentCreate">Fetch</button>
          </form>
        </div>
        </div>
</div>
  
	
	
  <!-- New Course Modal -->
          <div id="newCourseModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="courseModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3 id="courseModalLabel">Create new course</h3>
            </div>
            <div class="modal-body">
            <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
             <!-- <input class="span3" type="text" placeholder="Course Number">
              <input class="span3" type="text" placeholder="Name of course">
        	-->
        	{{ newCourseForm.CourseNo }} &nbsp; {{ newCourseForm.CourseNo.errors }}
        	{{ newCourseForm.Name }} &nbsp; {{ newCourseForm.Name.errors }}
              <p>Enter the credentials of the course submission Gmail account.</p>
        	<p>{{ newCourseForm.SubEmail }} &nbsp; {{ newCourseForm.SubEmail.errors }}<p>
        	{{ newCourseForm.SubPassword }} &nbsp; {{ newCourseForm.SubPassword.errors }}
          <p> {{ newCourseForm.SubPasswordConfirm }} &nbsp; {{ newCourseForm.SubPasswordConfirm.errors }} </p>
		 <p>
        {{ newCourseForm.Semester }} &nbsp; {{ newCourseForm.Semester.errors }}
        {{ newCourseForm.Year }} &nbsp; {{ newCourseForm.Year.errors }} 
        </p>
        	
             <!-- <input class="span3" type="text" placeholder="Login">
              <input class="span3" type="password" placeholder="Password"> -->

              <p>If you have TAs in your course, enter their names and email accounts below:</p>
           <!--   <input class="span3" type="text" placeholder="Email of TA"> -->
        	{{ newCourseForm.TAName }} &nbsp; {{ newCourseForm.TAName.errors }}
        	{{ newCourseForm.TAEmail }} &nbsp; {{ newCourseForm.TAEmail.errors }}
        	<div id='TAemail'></div>
              <p><!-- <button class="btn" name="addTA"><i class="icon-plus" onclick='generateRow()'></i> Add TA email</button></p> -->
        		<input class='btn' type='button' name='Add TA' value='Add TA' onClick='generateRow()'>
        	<input type='hidden' id='id_ExtraEmailCounter' name='ExtraEmailCounter' value='0'></p>
              <p>Select the xls file containing list of all students with their email ids:</p>
        	{{ newCourseForm.ExcelSheet }} &nbsp; {{ newCourseForm.ExcelSheet.errors }}
             <p> <a href="{{ STATIC_URL }}SampleXLSFetchem.xls" class="btn btn-mini btn-info">Download sample xls file</a></p>

              </div>
              <div class="modal-footer">
              <button class="btn" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary" name="courseCreate">Create</button>
            </form>
          </div>
      </div>

<!-- Course Settings Modal -->
        <div id="courseSettingsModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="courseModalLabel" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="courseModalLabel">{{ cCourse.Name }} Settings</h3>
          </div>
          <div class="modal-body">
          <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ courseSettingsForm.CourseNo }} &nbsp; {{ courseSettingsForm.CourseNo.errors }}
        {{ courseSettingsForm.Name }} &nbsp; {{ courseSettingsForm.Name.errors }}
            <p>Enter the credentials of the course submission Gmail account.</p>
        {{ courseSettingsForm.SubEmail }} &nbsp; {{ courseSettingsForm.SubEmail.errors }}
        {{ courseSettingsForm.SubPassword }} &nbsp; {{ courseSettingsForm.SubPassword.errors }}
        <p>
        {{ courseSettingsForm.Semester }} &nbsp; {{ courseSettingsForm.Semester.errors }}
        {{ courseSettingsForm.Year }} &nbsp; {{ courseSettingsForm.Year.errors }} 
        </p>
        <div class="accordion" id="manageTAs">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#manageTAs" href="#TAs">
              Manage TAs
            </a>
          </div>
          <div id="TAs" class="accordion-body collapse">
            <div class="accordion-inner">
              <table class="table table-striped">
                {% for i in cTAs %}
                {% if i.Type == "T" %}
                <tr>
                  <td>

                  {{ i.Name }} - {{ i.Email }}<a href="/course-{{ cCourse.id }}/removeTA-{{ i.id }}" class="btn btn-small pull-right btn-danger"><i class="icon-trash icon-white"></i></a>
                 </td>
                </tr>
                {% endif %}
                {% endfor %}
                </table>
                <div id='TAemail2'></div>
                <input class='btn' type='button' name='Add TA' value='Add TA' onClick='generateRow2()'>
                <input type='hidden' id='id_ExtraEmailCounter2' name='ExtraEmailCounter2' value='0'>

            </div>
          </div>
        </div>

      </div>
        <div class="accordion" id="manageStudents">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#manageStudents" href="#Students">
                Manage Students
              </a>
            </div>
            <div id="Students" class="accordion-body collapse">
              <div class="accordion-inner">
                <table class="table table-striped">
                  {% for i in allStudents %}
                  <tr>
                    <td>
                    {{ i.Name }} - {{ i.RollNo }} - {{ i.Email }}<a href="/course-{{ cCourse.id }}/removeStudent-{{ i.id }}" class="btn btn-small pull-right btn-danger"><i class="icon-trash icon-white"></i></a>
                   </td>
                  </tr>
                  {% endfor %}
                  </table>
                  <div id='StudentEmail'></div>
                <input class='btn' type='button' name='Add Student' value='Add Student' onClick='generateRow3()'>
                <input type='hidden' id='id_ExtraStudentEmailCounter' name='ExtraStudentEmailCounter' value='0'>

            </div>
                  <p>You can replace current student list with xls containing new students:</p>
                {{ courseSettingsForm.ExcelSheet }} &nbsp; {{ courseSettingsForm.ExcelSheet.errors }}
           <p> <a href="{{ STATIC_URL }}SampleXLSFetchem.xls" class="btn btn-mini btn-info">Download sample xls file</a></p>
              </div>
            </div>
          </div>
          </div>


            <div class="modal-footer">
            <a href="/course-{{ cCourse.id }}/excelExport/" class="btn btn-info pull-left">Export all marks in xls</a>
			     <a href="/course-{{ cCourse.id }}/deleteCourse/" class="btn btn-danger">Delete Course</a>
            <button class="btn" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" name="courseSettings">Save</button>
          </form>
        </div>
  </div>
  

   <!-- After Excel Import Modal -->
          <div id="afterExcelImportModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="afterExcelImportModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3 id="afterExcelImportModalLabel">Excel Import Successful</h3>
            </div>
            <div class="modal-body">
              <p>These are the students enrolled in {{ cCourse.name }}: </p>
               <table class="table table-striped">
                  {% for i in allStudents %}
                  <tr>
                    <td>
                    {{ i.Name }} - {{ i.RollNo }} - {{ i.Email }}<a href="/course-{{ cCourse.id }}/removeStudent-{{ i.id }}" class="btn btn-small pull-right btn-danger"><i class="icon-trash icon-white"></i></a>
                   </td>
                  </tr>
                  {% endfor %}
                  </table>

              </div>
              <div class="modal-footer">
              <button class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
      </div>
  
  
 
  


</div>

<!-- Le javascript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="{{ STATIC_URL }}js/bootstrap.js"></script> 
<script src="{{ STATIC_URL }}js/jquery.js"></script> 
<script src="{{ STATIC_URL }}js/jquery-ui-min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap-timepicker.js"></script>
<!-- <script src="{{ STATIC_URL }}js/anytime.js"></script> -->
   
 <script type="text/javascript"> 
  $(function(){
    $(".dateinput").datepicker();
  });
</script>


<script type="text/javascript">
$(function(){
	$('.timepicker-default').timepicker();
});
</script>


{% if openCourseModal %}
<script>
        $('#newCourseModal').modal('show');
</script>
{% endif %} 

{% if openAssignmentModal %}
<script>
        $('#assModal').modal('show');
		{% if miscArgs.newAssnFormIssue %}
		alert('{{ miscArgs.newAssnFormIssueError }}');
		{% endif %}
</script>
{% endif %} 

{% if afterExcelImportModal %}
<script>
        $('#afterExcelImportModal').modal('show');
</script>
{% endif %} 

{% if miscArgs.passValFail %}
<script>
        $('#newCourseModal').modal('show');
		alert('The passwords did not match!');
</script>
{% endif %}

{% if miscArgs.openAssnSettingsModal %}
<script>
        $('#assnSettings').modal('show');
		{% if miscArgs.AssnSettingsIssue %}
		alert('{{ miscArgs.AssnSettingsIssueMessage }}');
		{% endif %}
</script>
{% endif %}

{% if miscArgs.courseCreateLoginFailed %}
<script>
        $('#newCourseModal').modal('show');
		alert('The entered Email and password for the submission Email are not valid! Please check them and re-enter correct credentials.');
</script>
{% endif %}

{% if miscArgs.ExcelIssue %}
<script>
        $('#newCourseModal').modal('show');
		alert('{{ miscArgs.ExcelError }}');
</script>
{% endif %}

{% if miscArgs.DuplicateCourse %}
<script>
        $('#newCourseModal').modal('show');
		alert('{{ miscArgs.DuplicateCourseError }}');
</script>
{% endif %}


<script>
    function generateRow(){
    var d = document.getElementById('TAemail');
    var newRow = document.createElement('input');
    newRow.type = 'text'; 
    newRow.className='span2';
    newRow.name='ExtraTAEmail' + document.getElementById('id_ExtraEmailCounter').value;
    newRow.placeholder='TA Email';


    var TAName = document.createElement('input');
    TAName.type = 'text';
    TAName.className='span2';
    TAName.name='ExtraTAName' + document.getElementById('id_ExtraEmailCounter').value;
    TAName.placeholder='TA Name';

    var space = document.createTextNode('\u00a0 \u00a0');
    var space2 = document.createTextNode('\u00a0 \u00a0');

    d.appendChild(space2);
    d.appendChild(TAName);
    d.appendChild(space);
    d.appendChild(newRow);

    document.getElementById('id_ExtraEmailCounter').value++;
    }

    function generateRow2(){
    var d = document.getElementById('TAemail2');
    var newRow = document.createElement('input');
    newRow.type = 'text'; 
    newRow.className='span2';
    newRow.name='ExtraTAEmail2' + document.getElementById('id_ExtraEmailCounter2').value;
    newRow.placeholder='TA Email';


    var TAName = document.createElement('input');
    TAName.type = 'text';
    TAName.className='span2';
    TAName.name='ExtraTAName2' + document.getElementById('id_ExtraEmailCounter2').value;
    TAName.placeholder='TA Name';

    var space = document.createTextNode('\u00a0 \u00a0');
    var space2 = document.createTextNode('\u00a0 \u00a0');

    d.appendChild(space2);
    d.appendChild(TAName);
    d.appendChild(space);
    d.appendChild(newRow);

    document.getElementById('id_ExtraEmailCounter2').value++;
  }

  function generateRow3(){
    var d = document.getElementById('StudentEmail');
    var newRow = document.createElement('input');
    newRow.type = 'text'; 
    newRow.className='span2';
    newRow.name='ExtraStudentEmail' + document.getElementById('id_ExtraStudentEmailCounter').value;
    newRow.placeholder='Student Email';

    var StudentRoll = document.createElement('input');
    StudentRoll.type = 'text';
    StudentRoll.className='span1';
    StudentRoll.name='ExtraStudentRoll' + document.getElementById('id_ExtraStudentEmailCounter').value;
    StudentRoll.placeholder='Roll No.';

    var StudentName = document.createElement('input');
    StudentName.type = 'text';
    StudentName.className='span2';
    StudentName.name='ExtraStudentName' + document.getElementById('id_ExtraStudentEmailCounter').value;
    StudentName.placeholder='Student Name';

    var space = document.createTextNode('\u00a0 \u00a0');
    var space2 = document.createTextNode('\u00a0 \u00a0');
    var space3 = document.createTextNode('\u00a0 \u00a0');

    d.appendChild(space2);
    d.appendChild(StudentName);
    d.appendChild(space3);
    d.appendChild(StudentRoll);
    d.appendChild(space);
    d.appendChild(newRow);


    document.getElementById('id_ExtraStudentEmailCounter').value++;
  }
</script>

</body>
</html>
